<template>
  <div class="disposeInfo">
    <div class="top">
      <div class="topcard">
        <div class="toptitle flex row_bet col_center">
          <a-space>
            <span class="title">商品:</span>
            <span class="a_blue"> <a :href="'https://detail.tmall.com/item.htm?id='+info.item_id" target="_blank"> {{ info.short_title }}</a></span>
          </a-space>
          <a-space v-if="current === 1">
            <a-button class="br4" @click="drawer2show = true">转移商品</a-button>
            <a-button
              class="br4"
              type="dashed"
              style="color: #F5222D; border-color: #F5222D;"
              @click="refuseShow = true">拒绝接单
            </a-button>
            <a-button type="primary" class="br4" @click="doConfirmOrder">立即接单</a-button>
          </a-space>
          <a-space v-if="current === 2">
            <a-button
              class="br4"
              type="dashed"
              style="color: #F5222D; border-color: #F5222D;"
              @click="refuseShow = true">推广异常
            </a-button>
            <a-button type="primary" class="br4" @click="dosureShow = true">确认推广结算</a-button>
          </a-space>
          <a-space v-if="current === 3">
            <a-button
              class="br4"
              type="dashed"
              style="color: #F5222D; border-color: #F5222D;"
              @click="refuseShow = true">券信息异常
            </a-button>
            <a-button type="primary" class="br4" @click="drawershow = true">确认核对提交财务</a-button>
          </a-space>
        </div>
        <div class="botinfo flex row_bet col_center">
          <div class="infoli">
            <div class="m_b_6">提交用户：{{ issue.user }}</div>
            <div class="m_b_6">提交时间：{{ info.time }}</div>
            <div>商品类目：{{ info.goods_category }}</div>
          </div>
          <div class="infoli">
            <div class="m_b_6">费率：{{ info.service_rate }}% + {{ info.commission }}%</div>
            <div class="m_b_6">优惠券：{{ info.coupon_full_price }} - {{ info.coupon_price }}</div>
            <div>备注：{{ info.remark }}</div>
          </div>
          <div class="infoli flex row_bet col_center">
            <div class="text-right">
              <div>状态</div>
              <div class="title" :style="{ color: info.desc === '已完成'?'#52C41A':'#101010' }">
                {{ info.desc }}
              </div>
            </div>
            <div class="text-right m_l_10">
              <div>券后价</div>
              <div class="title">{{ info.after_price }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--    流程进度-->
    <div class="step">
      <a-card title="流程进度" style="width: 100%;border-radius: 6px;margin-bottom:20px;">
        <div>
          <a-steps progress-dot :current="current">
            <a-step v-for="(v,k) in stepList" :key="k">
              <div slot="title">
                {{ v.title }}
              </div>
              <div slot="subTitle">
                <div>
                  {{ v.description }}
                </div>
                <div
                  v-if="current === 1 || k===0"
                  :style="{color:v.time === '转移商品' ? '#1890FF':'',cursor: 'pointer'}"
                  @click="doopen">
                  {{ v.time }}
                </div>
              </div>
            </a-step>
          </a-steps>
        </div>
      </a-card>
    </div>
    <!--    转账信息-->
    <div class="goodsInfo" v-if="current > 3">
      <a-card title="转账信息" style="width: 100%;border-radius: 6px;margin-bottom:20px;">
        <div class="">
          <div class="m_b_10">数据截图</div>
          <div class="flex row_left col_center">
            <img
              :src="v"
              alt=""
              v-for="(v,k) in info.imglist"
              :key="k"
              @click="openimg(v)"
              style="width:175px;height:175px;margin-right: 10px;">
          </div>
          <div class="m_b_10 m_t_10">付款信息</div>
          <div>
            <span class="m_r_10">付款时间：{{ info.pay_time }}</span>
            <span class="m_l_10 m_r_10">付款金额：{{ info.pay_price }}</span>
            <span class="m_l_10 m_l_10">付款账号：{{ info.account }}</span>
          </div>
        </div>
        <div class="tuiguang">
          <div class="tgtop">
            财务复核
          </div>
          <div class="tipsbox flex row_left col_top">
            <div class="tipsli" style="width:50%;">
              <div class="tips">状态</div>
              <div class="title">
                {{ info.desc }}
              </div>
            </div>
            <div class="tipsli">
              <div class="tips">财务转账截图</div>
              <div>
                <div
                  v-if="info.pay_img ===''"
                  class="flex row_center col_center"
                  style="width:191px;height:148px;background-color:rgba(145, 145, 145, 0.07);"> 待财务上传
                </div>
                <img v-else :src="info.pay_img" alt="" style="width:191px;height:148px;" @click="openimg(info.pay_img)">
              </div>
            </div>
          </div>
        </div>
      </a-card>
    </div>
    <!--    优惠券截图-->
    <div class="step" v-if="current >2 ">
      <a-card title="优惠券截图" style="width: 100%;border-radius: 6px;margin-bottom:20px;">
        <div class="flex row_bet col_top">
          <div>
            <div class="m_b_10">开券截图</div>
            <div
              class="flex row_center col-center"
              style="width:644px;height:164px;line-height: 164px;background-color:#F7F7F7">
              <img
                v-if="info.coupon_img !==''"
                :src="info.coupon_img"
                alt=""
                style="width:644px;height:164px;"
                @click="openimg(info.coupon_img)">
              <div v-else>待用户上传</div>
            </div>
          </div>
          <div>
            <div class="m_b_10">推广完毕截图</div>
            <div
              class="flex row_center col-center"
              style="width:644px;height:164px;line-height: 164px;background-color:#F7F7F7;">
              <img
                v-if="info.coupon_extension_img !==''"
                :src="info.coupon_extension_img"
                alt=""
                style="width:644px;height:164px;"
                @click="openimg(info.coupon_extension_img)">
              <div v-else>待用户上传</div>
            </div>
          </div>
        </div>
      </a-card>
    </div>
    <!--    渠道信息-->
    <div class="step" v-if="current >1">
      <a-card title="渠道信息" style="width: 100%;border-radius: 6px;margin-bottom:20px;">
        <div>
          <span
            style="margin-right:30px;">对接服务费率：{{ info.docking_service_rate ===''?'待填写': info.docking_service_rate }}</span>
          <span>渠道名称：{{ info.channel_name ===''?'待填写': info.channel_name }}</span>
        </div>
      </a-card>
    </div>
    <!--    商品信息-->
    <div class="goodsInfo">
      <a-card title="商品信息" style="width: 100%;border-radius: 6px;margin-bottom:20px;">
        <div>
          <div class="botinfo flex row_bet col_center">
            <div class="infoli">
              <div class="m_b_6">商品id：{{ issue.item_id }}</div>
              <div class="m_b_6">商品店铺：{{ info.shop_name }}</div>
              <div>商品短标题：{{ info.short_title }}</div>
            </div>
            <div class="infoli">
              <div class="m_b_6">商品分类：{{ info.goods_category }}</div>
              <div class="m_b_6">商品原价：{{ info.price }}</div>
              <div>商品券后价：{{ info.after_price }}</div>
            </div>
            <div class="infoli">
              <div>活动类型：{{ info.activity_type === 1 ?'普通':
                info.activity_type === 2 ?'淘抢购':'聚划算' }}
              </div>
              <div class="m_b_6">费率：{{ info.service_rate }}% + {{ info.commission }}%</div>
              <div class="m_b_6">活动类型：{{ parseInt(info.settlement) === 1 ?'支付金额/结算券后价*服务费':
                parseInt(info.settlement) === 2 ?'支付金额*服务费率':'累计使用张数或件数*服务费单价' }}
              </div>
            </div>
          </div>
        </div>
        <div class="tuiguang">
          <div class="tgtop">
            推广信息
          </div>
          <div class="tipsbox flex row_around col_top">
            <div class="tipsli">
              <div class="tips">营销图</div>
              <div>
                <img :src="info.img" alt="" style="width:187px;height:238px;" @click="openimg(info.img)">
              </div>
            </div>
            <div class="tipsli">
              <div class="tips">推广文案</div>
              <div class="copytext">
                {{ info.copywriting }}
              </div>
            </div>
            <div class="tipsli">
              <div class="tips">朋友圈文案</div>
              <div class="copytext">
                {{ info.friend_text }}
              </div>
            </div>
          </div>
        </div>
        <div class="tuiguang">
          <div class="tgtop">
            优惠券信息
          </div>
          <div class="botinfo flex row_bet col_center" style="padding:30px 40px">
            <div class="infoli">
              <div class="m_b_6">券名称：{{ info.coupon_name }}</div>
              <div class="m_b_6">券链接：<a :href="info.coupon_url" target="_blank">{{ info.coupon_url }}</a></div>
              <div>券排期： {{ info.coupon_start_time }} 至 {{ info.coupon_end_time }}</div>
            </div>
            <div class="infoli">
              <div class="m_b_6">券面值：{{ info.coupon_price }}</div>
              <div class="m_b_6">满多少使用：{{ info.coupon_full_price }}</div>
              <div>券剩余：{{ info.coupon_surplus }} / {{ info.coupon_all_num }}</div>
            </div>
          </div>
        </div>
      </a-card>
    </div>
    <a-drawer
      title="转移商品"
      :width="513"
      :visible="drawer2show"
      :body-style="{ paddingBottom: '80px' }"
      @close="onClose"
    >
      <div class="drawer1">
        <div class="titles flex col_center">处理商品
          <a
            :href="'https://detail.tmall.com/item.htm?id='+info.item_id"
            target="_blank"
            style="line-height: 23px;">
            <span
              class="line-1"
              style="color:#2396F9;padding-left:5px;">{{ info.short_title }}</span>
          </a>
        </div>
        <div class="titles">选择目标</div>
        <a-select
          v-model="user_id"
          placeholder="选择处理人员"
          class="br4"
          style="width:464px;height: 30px;">
          <a-select-option :value="v.user_id" v-for="(v,k) in userList" :key="k">
            {{ v.user }}
          </a-select-option>
        </a-select>
        <div
          :style="{
            position: 'absolute',
            right: 0,
            bottom: 0,
            width: '100%',
            borderTop: '1px solid #e9e9e9',
            padding: '10px 16px',
            background: '#fff',
            textAlign: 'right',
            zIndex: 1
          }"
        >
          <a-button
            type="primary"
            style="float:left;"
            :disabled="btnloading"
            :loading="btnloading"
            class="br4"
            @click="dosubmit">
            <a-icon v-if="btnloading" type="reload" :spin="btnloading"/>
            确认转移
          </a-button>
        </div>
      </div>
    </a-drawer>
    <a-drawer
      title="提交财务"
      :width="513"
      :visible="drawershow"
      :body-style="{ paddingBottom: '80px' }"
      @close="onClose"
    >
      <div class="drawer1">
        <div class="titles flex col_cente">商品名称： <span class="line-1" style="color:#2396F9;padding-left:5px">{{ info.short_title }}</span>
        </div>
        <div class="titles">付款时间</div>
        <a-date-picker show-time placeholder="请选择付款时间" v-model="ptime">
        </a-date-picker>
        <div class="titles">付款金额</div>
        <a-input v-model="pay_price" placeholder="请输入付款金额"/>
        <div class="titles">付款账号</div>
        <a-input v-model="account" placeholder="请输入付款账号"/>
        <div class="titles">数据截图</div>
        <div>
          <div class="uploadimg">
            <a-upload
              name="file"
              action="https://app.letuilm.com/api/upload"
              list-type="picture-card"
              :file-list="fileList"
              :multiple="false"
              :before-upload="beforeUpload"
              @preview="handlePreview"
              @change="handleChange3">
              <div v-if="fileList.length < 6">
                <div class="nogoodsimg br4">
                  <div>
                    <a-icon type="plus" style="font-size: 24px;margin-top: 24px"/>
                  </div>
                  <div style="color: rgba(0,0,0,0.65);font-size: 14px;">
                    上传照片
                  </div>
                </div>
              </div>
            </a-upload>
            <div>可上传六张</div>
          </div>
        </div>
        <div
          :style="{
            position: 'absolute',
            right: 0,
            bottom: 0,
            width: '100%',
            borderTop: '1px solid #e9e9e9',
            padding: '10px 16px',
            background: '#fff',
            textAlign: 'right',
            zIndex: 1
          }"
        >
          <a-button
            type="primary"
            style="float:left;"
            :disabled="btnloading2"
            :loading="btnloading2"
            class="br4"
            @click="dosubmit2">
            <a-icon v-if="btnloading2" type="reload" :spin="btnloading2"/>
            确认核对且提交财务
          </a-button>
        </div>
      </div>
    </a-drawer>
    <a-modal
      :title="current ===1 ?'拒绝接单':current ===2 ?'推广异常':'券信息异常'"
      v-model="refuseShow"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
    >
      <a-input v-model="remark" placeholder="请输入理由"/>
    </a-modal>
    <a-modal
      title="确认推广结算"
      v-model="dosureShow"
      :confirm-loading="confirmLoading"
      @ok="handleOk2"
    >
      <div class="flex row_left col_center m_b_10">
        <div class="m_r_10" style="width:120px;"> 对接服务费率</div>
        <a-input v-model="docking_service_rate" placeholder="请输入对接服务费率"/>
      </div>
      <div class="flex row_left col_center">
        <div class="m_r_10" style="width:120px;">渠道名称</div>
        <a-input v-model="channel_name" placeholder="请输入渠道名称"/>
      </div>
    </a-modal>
    <a-modal v-model="previewVisible" :footer="null" @cancel="handleCancel">
      <img style="width: 100%" :src="previewImage"/>
    </a-modal>
  </div>
</template>

<script>
  import { Modal } from 'ant-design-vue'
  import {
    doTransferGoods,
    doConfirmOrder,
    doUpdateRemark,
    doErrorCollect,
    getCollectionUserList,
    getDisposeInfo,
    doExamineError,
    doExtension,
    doCheckAdopt
  } from '@/api/gatherApi'

  function getBase64 (file) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => resolve(reader.result)
      reader.onerror = error => reject(error)
    })
  }

  export default {
    name: 'DisposeInfo',
    data () {
      return {
        previewVisible: false,
        previewImage: '',
        fileList: [
          // {
          //   uid: '-1',
          //   name: 'image.png',
          //   status: 'done',
          //   url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
          // }
        ],
        imgstr: '',
        pay_time: '',
        ptime: null,
        pay_price: '',
        account: '',
        docking_service_rate: '',
        channel_name: '',
        refuseShow: false,
        dosureShow: false,
        confirmLoading: false,
        remark: '',
        info: {},
        current: 1,
        user_id: '',
        userList: [],
        btnloading: false,
        btnloading2: false,
        drawer2show: false,
        drawershow: false,
        stepList: [
          {
            title: '提交商品',
            description: '用户名',
            time: ''
          },
          {
            title: '审核接单',
            description: '处理用户名',
            time: '转移商品'
          },
          {
            title: '确认推广',
            description: '',
            time: ''
          },
          {
            title: '核对券信息',
            description: '',
            time: ''
          },
          {
            title: '财务复核',
            description: '',
            time: ''
          },
          {
            title: '完成',
            description: '',
            time: ''
          }
        ]
      }
    },
    destroyed () {
      this.$store.dispatch('setIssuename', '')
    },
    computed: {
      issue: function () {
        return this.$store.getters.issue
      }
    },
    created () {
      console.log(this.issue)
      this.getCollectionUserList()
      this.getDisposeInfo(this.issue.id)
    },

    mounted () {

    },

    methods: {
      openimg (url) {
        this.previewImage = url
        this.previewVisible = true
      },
      handleCancel () {
        this.previewVisible = false
      },
      handleChange3 ({ fileList }) {
        this.fileList = fileList
        // console.log(this.fileList)
        if (this.fileList[0].response) {
          // console.log(this.fileList[0].response.data.url)
        }
      },
      async handlePreview (file) {
        if (!file.url && !file.preview) {
          file.preview = await getBase64(file.originFileObj)
        }
        this.previewImage = file.url || file.preview
        this.previewVisible = true
      },
      beforeUpload (file) {
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
        if (!isJpgOrPng) {
          this.$message.error('对不起,只支持jpg/png格式的图片!')
        }
        const isLt2M = file.size / 1024 / 1024 < 5
        if (!isLt2M) {
          this.$message.error('对不起!图片大小超过5M!')
        }
        return isJpgOrPng && isLt2M
      },
      doCheckAdopt () {
        doCheckAdopt({
          id: this.info.id,
          data_img: this.imgstr,
          pay_time: this.pay_time,
          pay_price: this.pay_price,
          account: this.account
        }).then(res => {
          console.log(res)
          this.confirmLoading = false
          this.getDisposeInfo(this.info.id)
          this.$message.success('提交成功!')
          this.imgstr = ''
          this.fileList = []
          this.pay_time = ''
          this.ptime = null
          this.pay_price = ''
          this.account = ''
          this.drawershow = false
          this.btnloading2 = false
        }).catch(err => {
          console.log(err)
        })
      },
      doExtension () {
        doExtension({
          id: this.info.id,
          docking_service_rate: this.docking_service_rate,
          channel_name: this.channel_name
        }).then(res => {
          console.log(res)
          this.getDisposeInfo(this.info.id)
          this.$message.success('提交成功!')
          this.docking_service_rate = ''
          this.channel_name = ''
          this.confirmLoading = false
          this.dosureShow = false
        }).catch(err => {
          console.log(err)
        })
      },
      doExamineError () {
        doExamineError({
          id: this.info.id,
          remark: this.remark
        }).then(res => {
          console.log(res)
          this.getDisposeInfo(this.info.id)
          this.$message.success('提交成功!')
          this.remark = ''
          this.confirmLoading = false
          this.refuseShow = false
        }).catch(err => {
          console.log(err)
        })
      },
      doErrorCollect () {
        doErrorCollect({
          id: this.info.id,
          remark: this.remark
        }).then(res => {
          console.log(res)
          this.getDisposeInfo(this.info.id)
          this.$message.success('提交成功!')
          this.remark = ''
          this.confirmLoading = false
          this.refuseShow = false
        }).catch(err => {
          console.log(err)
        })
      },
      doopen () {
        if (this.current === 1) {
          this.drawer2show = true
        }
      },
      doConfirmOrder () {
        const that = this
        Modal.confirm({
          title: '确认接单吗?',
          okText: '确认',
          cancelText: '取消',
          onCancel () {
          },
          onOk () {
            doConfirmOrder({
              id: that.info.id
            }).then(res => {
              if (res.code === 200) {
                that.getDisposeInfo(that.info.id)
                that.$message.success('接单成功!')
              } else {
                that.$message.error(res.msg)
              }
            }).catch(err => {
              console.log(err)
            })
          }
        })
      },
      handleOk (e) {
        if (this.remark !== '') {
          this.confirmLoading = true
          switch (this.current) {
            case 1:
              this.doUpdateRemark()
              break
            case 2:
              this.doExamineError()
              break
            case 3:
              this.doErrorCollect()
              break
          }
        } else {
          this.$message.info('请输入理由!')
        }
      },
      handleOk2 (e) {
        if (this.docking_service_rate !== '' && this.channel_name !== '') {
          this.confirmLoading = true
          this.doExtension()
        } else {
          this.$message.info('请检查确认推广条件!')
        }
      },
      doUpdateRemark () {
        doUpdateRemark({
          id: this.info.id,
          remark: this.remark
        }).then(res => {
          console.log(res)
          this.getDisposeInfo(this.info.id)
          this.$message.success('拒绝成功!')
          this.remark = ''
          this.confirmLoading = false
          this.refuseShow = false
        }).catch(err => {
          console.log(err)
        })
      },
      onClose () {
        this.drawer2show = false
      },
      getCollectionUserList () {
        getCollectionUserList().then(res => {
          console.log(res)
          this.userList = res.data
        }).catch(err => {
          console.log(err)
        })
      },
      dosubmit () {
        this.btnloading = true
        if (this.user_id !== '') {
          doTransferGoods({
            id: this.info.id,
            user_id: this.user_id
          }).then(res => {
            console.log(res)
            this.user_id = ''
            this.getDisposeInfo(this.info.id)
            this.$message.success('转移成功!')
            this.btnloading = false
            this.drawer2show = false
          }).catch(err => {
            this.btnloading = false
            console.log(err)
          })
        } else {
          this.btnloading = false
          this.$message.info('请检查转移条件!')
        }
      },
      dosubmit2 () {
        this.btnloading2 = true
        if (this.ptime !== '' && this.pay_price !== '' && this.account !== '' && this.fileList.length > 0) {
          // format('YYYY-MM-DD HH:mm:ss')
          this.pay_time = this.ptime.format('YYYY-MM-DD HH:mm:ss')
          console.log('pay_time', this.pay_time)
          // console.log(this.pay_price)
          // console.log(this.account)
          for (let i = 0; i < this.fileList.length; i++) {
            if (i !== this.fileList.length - 1) {
              this.imgstr += '//' + this.fileList[i].response.data.url + ','
            } else {
              this.imgstr += '//' + this.fileList[i].response.data.url
            }
          }
          console.log(this.imgstr)
          this.doCheckAdopt()
        } else {
          this.btnloading2 = false
          this.$message.info('请检查提交条件!')
        }
      },
      getDisposeInfo (id) {
        getDisposeInfo({
          id: id
        }).then(res => {
          console.log('详情', res)
          this.info = res.data
          if (this.info.data_screenshot !== null) {
            this.info.imglist = this.info.data_screenshot.split(',')
          } else {
            this.info.imglist = []
          }
          this.stepList[0].description = this.issue.user
          this.stepList[0].time = this.info.time
          this.stepList[1].description = this.info.user
          // this.stepList[1].time = '转移商品'
          // this.info.desc = '财务复核'
          console.log('this.info.desc', this.info.desc)
          switch (this.info.desc) {
            case '审核接单':
              this.current = 1
              break
            case '确认推广结算':
              this.current = 2
              this.stepList[2].description = '确认推广后填写渠道信息结算'
              break
            case '核对券信息':
              this.current = 3
              this.stepList[2].description = '已确认推广结算'
              this.stepList[3].description = '核对开券截图，推广完毕截图'
              break
            case '财务复核':
              this.current = 4
              this.stepList[2].description = '已确认推广结算'
              this.stepList[3].description = '核对完毕'
              this.stepList[4].description = '等待财务复核'
              break
            case '完成':
              this.current = 5
              this.stepList[2].description = '已确认推广结算'
              this.stepList[3].description = '核对完毕'
              this.stepList[4].description = '付款完成'
              break
          }
        }).catch(err => {
          console.log(err)
        })
      }
    }
  }
</script>

<style lang='less' scoped>
  .disposeInfo {
    /deep/ .ant-steps-icon {
      width: 8px;
      height: 8px;
    }

    .top {
      position: relative;
      height: 164px;

      .m_b_6 {
        margin-bottom: 6px;
      }

      .text-right {
        text-align: right;
      }

      .title {
        color: #101010;
        font-weight: 600;
        font-size: 20px;
      }

      .topcard {
        width: 103%;
        height: 164px;
        position: absolute;
        top: -21px;
        left: -21px;
        background-color: #ffffff;
        padding: 22px;
        /*border-radius: 6px;*/

        .toptitle {

          .a_blue {
            color: #2396F9;
            font-size: 20px;
          }
        }
      }

      .botinfo {
      }
    }

    .goodsInfo {
      .tuiguang {
        /*padding: 0 30px;*/
        margin: 43px 0;
        border-radius: 8px;
        border: 1px solid rgba(145, 145, 145, 0.25);

        .tgtop {
          height: 44px;
          line-height: 44px;
          padding: 0 17px;
          border-radius: 8px 8px 0 0;
          background-color: rgba(145, 145, 145, 0.07);
          border: 1px solid rgba(145, 145, 145, 0.25);
        }

        .tipsbox {
          padding: 11px;

          .title {
            font-size: 20px;
            font-weight: 600;
            color: #101010;
          }

          .tipsli {
            .tips {
              color: #101010;
              font-weight: 600;
              margin-bottom: 12px;
            }

            .copytext {
              width: 303px;
            }

          }
        }
      }

    }

    .step {
      font-size: 14px;

      .title {
        color: #101010;
        font-size: 16px;
      }

    }

    .uploadimg {
      /deep/ .ant-upload {
        width: 56px;
        height: 20px;
        padding: 0px;
        margin: 0;
        border: none;
        background-color: transparent;
      }

      /deep/ .ant-upload-picture-card-wrapper {
        display: flex;
      }

      .nogoodsimg {
        width: 104px;
        height: 104px;
        background-color: rgba(0, 0, 0, 0.02);
      }
    }
  }
</style>
